<!-- 发布乐跑 -->
<template>
  <div class="fire">
    <NavBar2 :fnTitle="title"></NavBar2>
    <div class="content">
      <van-notify v-model="show2" type="success">
        <van-icon name="bell" style="margin-right: 4px;" />
        <span>保存成功</span>
      </van-notify>
      <div class="send_info">
        <textarea id="send_info_text" placeholder="填写具体乐跑的信息" v-model="tabletext">
        </textarea>
      </div>
      <div class="memedata">
        <img :src="a_meme" alt="" width="150" >
      </div>
      <div class="btn_box"><button class="btn" @click="locationText">保存</button></div>
      <div class="send_function">
        <div class="fun">
          <van-icon name="smile-o" size="25" />
          <span @click="showPopup">添加表情</span>
        </div>
        <!-- <div class="fun">
          <van-icon name="aim" size="25" />
          <span>有关话题</span>
        </div> -->

        <!-- 表情库 -->
        <van-dialog v-model="show" title="表情包" show-cancel-button>
          <div class="info_show">
              <div class="memedata" :data="expression" v-for="item in expression" :key="item.id" >
                <br>
                <van-row>
                 <div>
                   <img :src="item.meme" alt="" width="150">
                 </div>
                <button class="btn"  @click="showPopclose(item.id)">选择</button>
                 </van-row>
              </div>
          </div>
        </van-dialog>
      </div>
    </div>
  </div>
</template>

<script>

import NavBar2 from '@/components/NavBar2'
import Vue from 'vue'
import { Dialog } from 'vant'
Vue.use(Dialog)
export default {
  created() {
    this.GetAll()
  },
  data() {
    return {
      title: '乐跑信息',
      checked: true,
      tabletext: '',
      expression:'',
      show2:false,
      // 获取一个表情的链接
      a_meme:'',    
      show:false
    }
  },
  components: {
    NavBar2
  },
  methods: {
    // 弹出层
    showPopup() {
      this.show = true
    },
    showPopclose(val) {
      this.show = false
      this.getit(val)
    },
    showNotify() {
      this.show2 = true;
      setTimeout(() => {
        this.show2 = false;
      }, 2000);
    },
    locationText() {
      var val = this.tabletext
      sessionStorage.setItem('RunText', val)
      this.showNotify()
    },
    // 表情库
    async GetAll() {
      const { data: res } = await this.$http.get('/api/tucao/showallmeme')
      if (res.code !== 200) {
        //  console.log('获取用户列表失败！')
      }
      this.expression = res.data
      // console.log(this.expression);
    },
      // 得到一个表情
    async getit(val) {

      const { data: res } = await this.$http({
        method: 'post',
        url: '/api/tucao/getmeme',
        data: this.$qs.stringify({ // 这里是发送给后台的数据
          id: val,
        })
      })
      if (res.code !== 200) {
        // console.log(res);
        return
      }
      this.a_meme = res.data
      // console.log(this.a_meme);
      // console.log(res);
    }
  }
}
</script>

<style scoped>
.memedata {
  text-align: center;
}
.info_show {
  height: 500px;
  /* width: 300px; */
  overflow: hidden;
  overflow-y: scroll;
}
.btn_box {
  text-align: center;
}
.btn {
  margin-top: 1%;
  border: .026667rem solid #fff;
  border-radius: .533333rem;
  background-color: rgb(243, 133, 60);
  color: #fff;
  width: 30%;
  height: .8rem;
}
#send_info_text {
  margin-top: 5px;
  display: block;
  width: calc(90vw);
  padding: 10px;
  height: calc(40vh);
  margin: 0 auto;
  background-color: rgba(228, 228, 228, 0.644);
  border: none;
  outline: none;
  resize:none;
}
.send_function {
  margin-top: 5px;
  width: calc(90vw);
  padding: 10px;
  margin: 0 auto;
  /* vertical-align: middle; */
}
.send_function span {
  /* display: inline-block; */
  /* height: 25px; */
  vertical-align: middle;
  margin-left: 15px;
  font-size: 15px;
}
.fun {
  height: 50px;
  padding: 0 15px;
  margin: 10px 0;
  /* vertical-align: middle!important; */
}
.van-icon {
  vertical-align: middle!important;
}
.van-switch {
  float: right;
}
</style>
